<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-09 
 -->


<template>
  <div v-nav-current="{
        className: 'nav-item',
        activeClass: 'nav-current',
        curIdx
      }" @click="navClick($event)" class="w-full h-9 border-b border-gray-300 box-border bg-white overflow-hidden">
    <div class="h-11 overflow-x-auto">
      <div class="flex flex-row h-11" :style="`width:${navData.length * 20}vw`">
        <nav-item v-for="(item, index) in navData" :key="index" :item="item" :index="index"></nav-item>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import navData from '@/datas/nav'
import navItem from './Item.vue'
  import { defineComponent, ref, VueElement } from 'vue'
  import { navCurrent } from '@/directives'
import { useStore } from 'vuex'
import getData from '@/services'
  export default defineComponent({
    name: '~index',
    components: { navItem },
    directives: { navCurrent },
    setup(props, {emit, slots}) {
      const curIdx = ref(0);
      const store = useStore();
      const navClick = (event: any) => {
        const className = event.target.className;
        if (className.includes('nav-item')) {
          const tar = event.target;
          curIdx.value = tar.dataset.index;
          const consName = tar.innerText
          store.commit('setConsName', consName);
          getData(store)
        }
      }
     return {
       navData,
       curIdx,
       navClick
      }
     }
  })

</script>

<style lang='css' scoped>

</style>
